var element = layui.element;
var form = layui.form;
var $ = layui.jquery;
var layedit = layui.layedit;
layedit.build('demo'); //建立编辑器
var selectM = layui.selectM;

var input_item_html = '<div class="input-inline_group mb5">\n' +
  '                      <div class="layui-input-inline w90">\n' +
  '                        <input class="layui-input" type="text" placeholder="输入参数名">\n' +
  '                      </div>\n' +
  '                      <div class="layui-input-inline w285">\n' +
  '                        <input class="layui-input" type="text" placeholder="输入属性值">\n' +
  '                      </div>\n' +
  '                      <div class="layui-input-inline">\n' +
  '                    <span class="del_input">\n' +
  '                      <img src="../assets/images/icon_delete.png" alt="">\n' +
  '                    </span>\n' +
  '                      </div>\n' +
  '                    </div>';


$("#add_input-inline_group").on('click', function () {
  $("#input-inline_groups").append(input_item_html);
});

$(".colla-right-action .icon_del").on('click', function () {
  $(this).parents('.layui-collapse').remove();
});

$(document).on('click', '.del_input', function () {
  $(this).parents('.input-inline_group').remove();
});

Array.prototype.remove = function (val) {
  var index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};


/*查看示例图片弹出层*/
function cksl() {
  layer.photos({
    photos: {
      "title": "", //相册标题
      "id": 123, //相册id
      "start": 0, //初始显示的图片序号，默认0
      "data": [   //相册包含的图片，数组格式
        {
          "alt": "图片名",
          "pid": 666, //图片id
          "src": "../assets/images/ckxlimg.jpg", //原图地址
          "thumb": "" //缩略图地址
        }
      ]
    }
    , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
  });
}


/*选择购买商城*/
form.on('select(gmshop)', function (data) {
  //console.log(data.elem); //得到select原始DOM对象
  //console.log(data.value); //得到被选中的值
  //console.log(data.othis); //得到美化后的DOM对象
  if (data.value == 2) {
    $("#v2tip").show();
    $("#v2Iiem").show();
    $("#v1tip").hide();
    $("#mklItem").show();

  } else {
    $("#v2tip").hide();
    $("#v2Iiem").hide();
    $("#v1tip").show();
    $("#mklItem").hide();
  }
});

/*选择京东或天猫商城*/
form.on('select(shop)', function (data) {
  if (data.value == 'tm') {
    $("#mklItem").show();
  } else {
    $("#mklItem").hide();
  }
});

form.on('radio(guige)', function (data) {
  if (data.value == '多规格') {
    $(".select_guige").show();
  } else {
    $(".select_guige").hide();
  }
});


function addrk() {
  layer.open({
    title: '新增入口',
    skin: 'zp-popup',
    area: '540px',
    type: 1,
    content: $('#addrkPopup')
  });
}

function open_demo(e) {
  $(e).find('i').toggleClass('arrow_t');
  $(".xl_demo_list_box").toggle();
}


/*选择分类弹出框*/
function select_fenlei() {
  layer.open({
    title: '选择分类',
    skin: 'zp-popup',
    area: '540px',
    type: 1,
    content: $('#selflPopup')
  });
}

var fenlei_01 = '';
var fenlei_02 = '';

$(".selfl_box .left").find('li').on('click', function () {

  $(this).siblings().removeClass('active');
  $(this).addClass('active');
  fenlei_01 = $(this).html();
  fenlei_02 = '';
  var index = $(this).index();
  $(".selfl_box .right ul").hide();
  $(".selfl_box .right ul").eq(index).show();
});

$(".selfl_box .right").find('li').on('click', function () {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
  console.log($(this).html());
  fenlei_02 = $(this).html();
});

function qdselfl() {
  layer.closeAll();
  if (fenlei_01 == "") {
    return;
  }
  if (fenlei_02 != "") {
    $("#fenleibtn").html(fenlei_01 + ">" + fenlei_02);
  } else {
    $("#fenleibtn").html(fenlei_01);
  }

  $("#editfl").show();

}

function saveEdit() {
  layer.open({
    title: '操作提示',
    skin: 'zp-popup',
    type: 1,
    content: $('#succeesPopup')
  });
}


var tagData = [
  {"id": 12, "name": "尺码"},
  {"id": 13, "name": "颜色"},
  {"id": 14, "name": "款式"},
  {"id": 15, "name": "重量"},
  {"id": 16, "name": "系列"}
];
//多选标签-基本配置
var tagIns1 = selectM({
  //元素容器【必填】
  elem: '#tag_ids1'
  //候选数据【必填】
  , data: tagData
  //默认值
  , selected: []
  , max: 3
  , width: 380
});

//  点击下拉框选项
$("#tag_ids1").on('click', 'dd', function () {
  zp_rawThead(tagIns1.names);

  var id = $(this).attr('lay-value');
  cout2();
  /*模拟数据*/
  var obj1 = {
    id: id,
    title: '尺码',
    tags: ['XL', 'L', 'S']
  }
  var obj2 = {
    id: id,
    title: '颜色',
    tags: ['白色', '黑色', '灰色']
  }
  var obj3 = {
    id: id,
    title: '款式',
    tags: ['少女系', '浪漫系', '可爱系']
  }

  var text = $(this).find('span').html();
  if ($(this).hasClass('layui-this')) {
    if(text == '尺码'){
      addggItem(obj1);
    }
    else if(text == '颜色'){
      addggItem(obj2);
    } else if(text == '款式') {
      addggItem(obj3);
    }
  } else {
    $("#ggitem_"+id).remove();
    zp_drawTbody();
  }
});


//  点击已选值上的删除按钮
$("#tag_ids1").on('click', 'a i', function () {
  var id = $(this).siblings('span').attr('lay-value');
  $("#ggitem_"+id).remove();
  zp_rawThead(tagIns1.names);
  zp_drawTbody();
  cout2();
});

// 点击添加生成的规格块上的删除按钮
$(document).on('click', '.guige_list .icon_del', function () {
  var id = $(this).attr('lay-value');
  $(this).parents('.layui-collapse').remove();
  var arr = tagIns1.selected;



  for (var i = 0; i< arr.length; i++){
    if(arr[i].id == id){
      arr.splice(i,1);
    }
  }
  console.log(arr)

  cout2();
});
// 点击 已有规格 是否选中
$(document).on('click', '.tags span', function () {
  var input = $(this).parents('.tags').find('.tags_input');
  var text = $(this).find('em').text();
  if ($(this).hasClass('tag_selected')) {
    $(this).removeClass('tag_selected');
    var inparr = input.val().split(',');
    inparr.remove(text);
    input.val(inparr.toString());
  } else {
    $(this).addClass('tag_selected');
    var str = '';
    if (input.val() == "") {
      str = text;
    } else {
      str = input.val() + "," + text;
    }
    input.val(str);
  }
  zp_drawTbody()

});
/**
 *
 * <span><em>白色</em></span>*/
function addggItem(obj) {
  var html = '<div id="ggitem_'+obj.id+'" class="layui-collapse mb10">\n' +
    '                      <div class="layui-colla-item">\n' +
    '                        <h2 class="layui-colla-title"><span>' + obj.title + '</span></h2>\n' +
    '                        <div class="colla-right-action"><i lay-value="'+obj.id+'" class="layui-hide icon_del"></i></div>\n' +
    '                        <div class="layui-colla-content layui-show">\n' +
    '                          <div class="tags">\n';

     for(var i =0; i< obj.tags.length; i++){
       html += '<span><em>'+obj.tags[i]+'</em></span>';
     };

     html += '  <input class="tags_input" type="hidden"/>\n' +
    '                            <div class="flexg" style="display: inline-flex">\n' +
    '                              <input type="text" name="" class="inputTags layui-input w100" placeholder="输入规格值">\n' +
    '                              <button class="layui-btn layui-btn-primary primary_btn ml6">新增</button>\n' +
    '                            </div>\n' +
    '                          </div>\n' +
    '                        </div>\n' +
    '                      </div>\n' +
    '                    </div>';

  $(".guige_list").append($(html))
}